<style lang="less">
    @import '../../assets/css/table.less';
    @import '../../assets/css/common.less';
</style>
<template>
    <div>
        <Row :gutter="10">
            <Card>
                <p slot="title">
                    <Icon type="pinpoint"></Icon>
                    订阅号认证列表
                </p>
                <Row>
                    <RadioGroup v-model="filter.auth" @on-change="init" type="button" style="margin-right: 10px">
                        <Radio :label="0">未认证</Radio>
                        <Radio :label="1">待审认证</Radio>
                        <Radio :label="2">已认证</Radio>
                        <Radio :label="3">不通过</Radio>
                    </RadioGroup>
                </Row>
                <Row class="margin-top-10">
                    <Table style="width: calc(100vw - 256px - 36px - 32px)" :loading="loading" :columns="columns" :data="list"></Table>
                </Row>
                <Row class="margin-top-10">
                    <Page :total="pagenation.totalPage" :page-size="pagenation.perPage"
                          :current="pagenation.currentPage" show-elevator show-total @on-change="change"></Page>
                </Row>
            </Card>
        </Row>

        <Modal v-model="subscription_info" title="查看资料" width="40%">
            <div id="subscription_info">
                <div>
                    <label>类型</label>
                    <span>{{subscription.type_name}}</span>
                </div>
                <div>
                    <label>领域</label>
                    <span>{{subscription.fields}}</span>
                </div>
                <div>
                    <label>运营者名称</label>
                    <span>{{subscription.name}}</span>
                </div>
                <div>
                    <label>身份证号</label>
                    <span>{{subscription.id_code}}</span>
                </div>
                <div>
                    <label>身份证图片</label>
                    <span>
                    <a :href="subscription.id_code_img" target="_blank" slot="extra">
                        <img :src="subscription.id_code_img" alt="" style="max-width: 100px; max-height: 100px;">
                    </a>
                </span>
                </div>
                <div>
                    <label>身份证背面</label>
                    <span>
                    <a :href="subscription.id_code_back_img" target="_blank" slot="extra">
                        <img :src="subscription.id_code_back_img" alt="" style="max-width: 100px; max-height: 100px;">
                    </a>
                </span>
                </div>
                <div>
                    <label>地址</label>
                    <span>{{subscription.full_address}}</span>
                </div>
                <div>
                    <label>邮箱</label>
                    <span>{{subscription.email}}</span>
                </div>
                <div>
                    <label>辅助材料</label>
                    <span>{{subscription.material}}</span>
                </div>
                <div>
                    <label>辅助材料图片</label>
                    <span>
                    <a :href="subscription.material_pic" target="_blank" slot="extra">
                        <img :src="subscription.material_pic" alt="" style="max-width: 100px; max-height: 100px;">
                    </a>
                </span>
                </div>
                <div>
                    <label>公司名</label>
                    <span>{{subscription.company_name}}</span>
                </div>

                <div>
                    <label>公司编号</label>
                    <span>{{subscription.company_code}}</span>
                </div>

                <div>
                    <label>营业执照</label>
                    <span>
                    <a :href="subscription.company_pic" target="_blank" slot="extra">
                        <img :src="subscription.company_pic" alt="" style="max-width: 100px; max-height: 100px;">
                    </a>
                </span>
                </div>

                <div>
                    <label>授权扫描文件</label>
                    <span>
                    <a :href="subscription.auth_scan" target="_blank" slot="extra">
                        <img :src="subscription.auth_scan" alt="" style="max-width: 100px; max-height: 100px;">
                    </a>
                </span>
                </div>

                <div>
                    <label>网址或微博</label>
                    <span>{{subscription.url}}</span>
                </div>
            </div>

            <div slot="footer"></div>
        </Modal>

        <Modal
                v-model="noPassModel.show"
                title="认证不通过理由"
                @on-ok="noPassOk"
                @on-cancel="noPassCancel">
            <Input v-model="noPassModel.reason" type="textarea" placeholder="请输入不通过理由"/>
        </Modal>
    </div>
</template>
<script>
    import User from '@/model/User'

    export default {
        data() {
            return {
                filter: {
                    auth: 1
                },
                list: [],
                loading: true,
                pagenation: {},
                subscription_info: false,
                subscription: {
                    type_name: '',
                    fields: '',
                    name: '',
                    id_code: '',
                    id_code_img: '',
                    id_code_back_img: '',
                    full_address: '',
                    email: '',
                    material: '',
                    material_pic: '',
                    company_name: '',
                    company_code: '',
                    company_pic: '',
                    auth_scan: '',
                    url: ''
                },
                noPassModel: {
                    show: false,
                    id: 0,
                    reason: ''
                }
            }
        },
        computed: {
            columns: function () {
                let columns = [
                    {
                        key: 'id',
                        title: 'id',
                        width: 80,
                    }
                ];
                columns.push.apply(columns, [
                    {
                        key: 'nickname',
                        title: '昵称',
                        render: (h, params) => {
                            return <strong>
                                {params.row.nickname}
                                <span
                                    v-show={params.row.vest_name !== ''}
                                    style="background: green; color: white; padding: 2px; font-weight: normal; border-radius: 3px; margin-left: 2px">
                                    {params.row.vest_name}
                                </span>
                            </strong>
                        },
                    },
                    {
                        key: 'icon',
                        title: '头像',
                        render: (h, params) => {
                            return h(
                                'div',
                                {
                                    style: {
                                        backgroundImage: 'url(' + params.row.icon + ')',
                                        width: '50px',
                                        height: '50px',
                                        margin: '10px 0',
                                        position: 'relative',
                                        cursor: 'pointer',
                                        backgroundSize: 'cover',
                                    }
                                }
                            )
                        }
                    }
                ])

                columns.push({
                    key: 'phone',
                    title: '手机号'
                })

                columns.push({
                    key: 'article_count_dingyue',
                    title: '发布文章数',
                    render: (h, params) => {
                        return <i-button
                            type="text"
                            onClick={() => {
                                let routeData = ''
                                routeData = this.$router.resolve({
                                    name: 'userArticleList',
                                    params: {user_id: params.row.id, nickname: params.row.nickname}
                                })
                                window.open(routeData.href, '_blank')
                            }}>
                            {params.row.article_count_dingyue}
                        </i-button>
                    },
                })

                columns.push.apply(columns, [
                    {
                        key: 'time',
                        title: '注册时间'
                    },
                    {
                        key: 'status',
                        title: '状态',
                        align: 'center',
                        render: (h, params) => {
                            let name = '';
                            let class_name = '';
                            if (parseInt(params.row.status) === User.STATUS_REVIEW) {
                                name = '待审'
                                class_name = 'warning'
                            } else if (parseInt(params.row.status) === User.STATUS_MODIFY_REVIEW) {
                                name = '修改资料审核'
                                class_name = 'warning'
                            } else if (parseInt(params.row.status) === User.STATUS_NO_PASS) {
                                name = '不通过'
                                class_name = 'error'
                            } else if (parseInt(params.row.status) === User.STATUS_PASS) {
                                name = '正常'
                                class_name = 'success'
                            } else {
                                name = '禁用'
                                class_name = 'error'
                            }
                            return h(
                                'Tag',
                                {
                                    props: {
                                        type: 'dot',
                                        color: class_name,
                                    },
                                },
                                name,
                            )
                        },
                    },
                    {
                        title: '操作',
                        align: 'center',
                        render: (h, params) => {
                            return <div>
                                <i-button
                                    type="success"
                                    onClick={() => this.doPass(params.row.id)}
                                    v-show={params.row.auth !== 2}
                                    size="small"
                                    placement="top"
                                    style="margin: 0 5px">
                                    通过
                                </i-button>
                                <i-poptip
                                    v-show={params.row.auth !== 3}
                                    confirm={true}
                                    title="您确定要不通过该账号吗?"
                                    transfer={true}
                                    onOn-ok={() => this.doNoPass(params.row)}
                                    style="margin: 0 5px"
                                >
                                    <i-button
                                        type="error"
                                        size="small"
                                        placement="top">
                                        不通过
                                    </i-button>
                                </i-poptip>
                                <br/>
                                <i-button
                                    onClick={() => {
                                        this.showSubscription(params.row.id)
                                    }}
                                    type="text"
                                    size="small"
                                    style="margin: 5px">
                                    更多资料
                                </i-button>
                            </div>
                        },
                    },
                ])
                return columns
            }
        },
        methods: {
            showSubscription: function (id) {
                User.subscriptionView(id).then(res => {
                    if (res.code === 0) {
                        this.subscription_info = true
                        this.subscription = res.data
                    } else {
                        this.$Message.error('该订阅号未填写资料')
                    }
                })
            },
            doPass: function (id) {
                User.passAuth(id).then(res => {
                    if (res.code === 0) {
                        this.$Message.success('操作成功')
                        let item = this.list.find(item => {
                            return item.id === this.noPassModel.id
                        })
                        let index = this.list.indexOf(item)
                        this.$set(this.list, index, res.data)
                    } else {
                        this.$Message.success(res.text)
                    }
                })
            },
            doNoPass: function (row) {
                this.noPassModel.id = row.id
                this.noPassModel.show = true
            },
            noPassOk: function () {
                User.noPassAuth(this.noPassModel.id, this.noPassModel.reason).then(res => {
                    if (res.code === 0) {
                        this.$Message.success('操作成功')
                        this.init()
                    } else {
                        this.$Message.success(res.text)
                    }
                    this.noPassModel.id = 0
                    this.noPassModel.reason = ''
                })
            },
            noPassCancel: function () {
                this.noPassModel.id = 0
                this.noPassModel.reason = ''
            },

            change: function (page) {
                this.loading = true
                this.filter.page = page - 1
                this.init()
            },
            search: function () {
                this.filter.page = 0
                this.init()
            },
            async init() {
                this.loading = true
                User.subscriptionAuthList(this.filter).then(res => {
                    if (res.code === 0) {
                        this.list = res.data
                        this.loading = false
                        this.pagenation.currentPage = parseInt(res.currentPage) + 1
                        this.pagenation.totalPage = parseInt(res.totalPage)
                        this.pagenation.perPage = parseInt(res.perPage)
                    } else {
                        this.$Notice.error({
                            title: '权限错误',
                            desc: res.text
                        })
                    }
                })
            }
        },
        mounted() {
            this.init()
        },
    }
</script>
<style lang="less">
    .demo-upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        margin-right: 4px;
    }

    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
    }

    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }

    p.prompt {
        color: #dddee1;
    }

    .btn_right {
        width: 1%;
        margin-left: -25px
    }

    .special_check {
        width: 22%;
        height: 30px;
        margin-left: 10px;
        display: inline-block;
        padding-left: 1%
    }
    #subscription_info{
        div{
            display: flex;
            justify-content: space-between;
            font-size: 15px;
            margin-top: 10px;
            label{
                width: 250px;
            }
        }
    }
</style>
